import { useLocation, useNavigate } from 'react-router-dom'
import { NavBar, ImagePreview } from 'react-vant';

export default function ComplaintDetails() {
    const { state } = useLocation()
    const images = state.images.map(i => (i.url))
    let navigate = useNavigate()
    console.log(state);
    return <>
        <NavBar
            title="投诉详情"
            onClickLeft={() => { navigate(-1) }}
            style={{
                '--rv-nav-bar-arrow-size': '20px', '--rv-nav-bar-icon-color': '#333', '--rv-nav-bar-title-text-color': '#333', '--rv-nav-bar-background-color': '#fff',
                boxShadow: '0 2px 10px rgba(0, 0, 0, 0.05)'
            }} />
        <div style={{ backgroundColor: '#f7f8fa', minHeight: 'calc(100vh - 46px)', padding: '16px', boxSizing: 'border-box' }}>
            <div style={{ backgroundColor: '#fff', borderRadius: '12px', padding: '16px', boxShadow: '0 2px 12px rgba(0, 0, 0, 0.05)', height: '85vh' }}>
                <h3 style={{ margin: ' 12px ', fontSize: '18px', color: '#333', fontWeight: '600' }}>
                    {state.title}
                </h3>
                <span style={{
                    display: 'inline-block', background: 'linear-gradient(to right, #ff8f34, #ee0a24)', color: '#fff', padding: '4px 12px', borderRadius: '16px',
                    fontSize: '12px', marginBottom: '16px'
                }}>
                    {state.type}
                </span>

                <div style={{
                    padding: '12px 0', color: '#666', lineHeight: '1.6', fontSize: '15px', borderBottom: '1px solid #f0f0f0',
                    marginBottom: '16px', textIndent: '2em', maxWidth: '90vw', overflowWrap: 'break-word'
                }}>{state.content}</div>
                <div style={{ marginBottom: '16px' }}>
                    <p style={{
                        margin: '8px 0', color: '#888', fontSize: '14px'
                    }}>
                        <span style={{ color: '#333', marginRight: '8px' }}>投诉人:</span>
                        {state.name}
                    </p>

                    <p style={{
                        margin: '8px 0', color: '#888', fontSize: '14px'
                    }}>
                        <span style={{ color: '#333', marginRight: '8px' }}>投诉时间:</span>
                        {state.time}
                    </p>
                </div>

                {state.images.length > 0 && (
                    <div style={{ marginTop: '16px' }}>
                        <p style={{ color: '#333', fontSize: '14px', marginBottom: '12px' }}>相关图片:</p>
                        <div style={{
                            display: 'flex', flexWrap: 'wrap', gap: '8px'
                        }}>
                            {state.images.map(i => (
                                <img src={i.url} key={i.url} style={{
                                    width: 'calc(30% - 4px)', height: '120px', borderRadius: '8px', objectFit: 'cover'
                                }}
                                    alt="投诉相关"
                                    onClick={() => {
                                        ImagePreview.open({
                                            images,
                                            onChange: (index) => console.log(`当前展示第${index + 1}张`),
                                        })

                                    }}
                                />
                            ))}
                        </div>
                        <div style={{ marginTop: '10px' }}>
                            <p style={{ color: '#333', fontSize: '14px', marginBottom: '12px' }}>相关视频:</p>
                            {state.videos.length > 0 && (
                                state.videos.map((item, index) => (
                                    <video
                                        key={index}
                                        controls
                                        src={item.url}
                                        style={{ width: '30%', height: '15vh', margin: '0 10px 10px 0  ' }}
                                    />
                                ))

                            )}

                        </div>

                    </div>

                )}
            </div>
        </div>
    </>
}